<script setup lang="ts">
import { onMounted } from 'vue'

const toDetectionPage = () => {
  window.open('/static/detection.html', '_blank')
}

onMounted(() => {
  toDetectionPage()
})
</script>

<template>
  <div class="detection-page">
    <a @click="toDetectionPage" class="link">
      <h2>若无法跳转，请点击此处！</h2>
    </a>
  </div>
</template>

<style scoped>
.detection-page {
  /* 让父容器占满整个视口，确保居中在页面中间 */
  width: 100vw;
  height: 100vh;
  /* 使用flex布局实现居中 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin: 0; /* 清除默认margin */
  padding: 0; /* 清除默认padding */
}

.link {
  /* 可选：美化链接样式 */
  text-decoration: none; /* 去除下划线 */
  color: #333; /* 文字颜色 */
  cursor: pointer; /* 鼠标悬停显示手型 */
}

.link:hover {
  color: #42b983; /* 悬停时变色（Vue默认主题色） */
}

h2 {
  margin: 0; /* 清除h2默认margin，避免居中偏移 */
}
</style>
